
import { ElImage } from 'element-plus';
import { h, nextTick } from 'vue';
import store from './store.js'
// import { useEventListener } from '@vueuse/core'

//扩展ElImage, 处理图片路径， 比如说根据store.getUrl配置，访问OSS服务器上的路径
export default {
    name: "MyImg",
    inheritAttrs: true,
    extends: ElImage,
    props:{
        autoPreview:{
            type:Boolean,
            default:true
        }
    },
    methods:{
        // addPreviewTouchEvent(){
        //     if(!('ontouchstart' in document.documentElement))return;

        //     let vv = this.$el.querySelector(".el-image-viewer__img");
        //     if(vv){
        //         this._touchstart = useEventListener(vv,"touchstart", (e)=>{
        //             let event = new MouseEvent("mousedown",e.changedTouches[0]);
        //             e.target.dispatchEvent(event);
        //         });
        //         this._touchmove = useEventListener(document,"touchmove", (e)=>{
        //             let event = new MouseEvent("mousemove",e.changedTouches[0]);
        //             document.dispatchEvent(event);
        //         });
        //         this._touchend = useEventListener(document,"touchend", (e)=>{
        //             let event = new MouseEvent("mouseup",e.changedTouches[0]);
        //             document.dispatchEvent(event);
        //         });
        //     }
        // },
        // removePreviewTouchEvent(){
        //     if(this._touchstart){
        //         this._touchstart();
        //         this._touchstart = null;
        //     }
        //     if(this._touchmove){
        //         this._touchmove();
        //         this._touchmove = null;
        //     }
        //     if(this._touchend){
        //         this._touchend();
        //         this._touchend = null;
        //     }
        // },
    
    },
    computed: {
        url() {
            if (this.src && store.getUrl) {
                let ss = this.src.split(";").filter(x=>!!x);
                if(ss.length>0){
                    let url1 = store.getUrl(ss[0]);
                    return url1;
                }
            }
            return this.src;
        },
        imgs(){
            let items = this.previewSrcList || [];
            if(items.length==0){
                return [this.url];
            }
            if (items.length>0 && store.getUrl) {
                items = items.map(p=>store.getUrl(p));
            }
            return items;
        }
    },
    render() {
        let props = { ...this.$attrs, ...this.$props, src: this.url };
        if(this.autoPreview){
            props.previewSrcList = this.imgs.map(x=>{
                let ix = x.lastIndexOf("?");
                if(ix!=-1){
                    return x.substring(0,ix);
                }
                return x;
            });
            props.previewTeleported = true;
            // props.onShow = ()=>{
            //     //刚接收到事件的时候preview内容还未产生，等下一个事件周期再附加
            //     nextTick(()=>{
            //         this.addPreviewTouchEvent();
            //     });
            // };
            // props.onClose = ()=>{
            //     this.removePreviewTouchEvent();
            //     document.body.style.overflow = "auto";
            // }
        }
        // document.body.style.overflow = "auto";
        return h(ElImage, props, this.$slots);
    }
}
